<template>
  <div>
    <a-spin :spinning="loading">
      <a-card :bordered="false" :bodyStyle="{ padding: '0', height: '100%' }" id="aCardPosition">
        <div class="table-page-search-wrapper" style="margin-top:24px;">
          <a-row :gutter="48">
            <a-form layout="inline">
              <a-col :md="8" :sm="24">
                <a-form-item label="搜索学员">
                  <a-input
                    v-model="keywords"
                    style="width:80%;"
                    placeholder="请输入学员名称/手机号码(回车搜索)"
                    @pressEnter="$refs.table1.refresh(true)"
                  >
                    <a-tooltip slot="suffix" title="搜索学员/手机号码">
                      <a-icon
                        type="search"
                        style="color: rgba(0,0,0,.45)"
                        @click="$refs.table1.refresh(true)"
                      />
                      <!-- @click="$refs.table.refresh(true)" -->
                    </a-tooltip>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="所在班级">
                  <a-select
                    v-model="queryParam.class_id"
                    style="width:80%;"
                    placeholder="请选择所在班级"
                    allowClear
                  >
                    <a-select-option
                      v-for="(item,index) in classList"
                      :key="index"
                      :value="item.id"
                    >{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="上课老师">
                  <a-select
                    v-model="queryParam.teacher_id"
                    style="width:80%;"
                    placeholder="请选择上课老师"
                    allowClear
                  >
                    <a-select-option
                      v-for="(item,index) in teacherList"
                      :key="index"
                      :value="item.id"
                    >{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-form-model v-if="showSearch" layout="inline" style="margin-top:10px;">
                <a-col :md="8" :sm="24">
                  <a-form-item label="上课日期:">
                    <a-range-picker style="width:80%;" @change="changeDate" />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="报读课程">
                    <a-select
                      v-model="queryParam.course_id"
                      style="width:80%;"
                      placeholder="请选择报读课程"
                      allowClear
                    >
                      <a-select-option
                        v-for="(item,index) in coursesList"
                        :key="index"
                        :value="item.id"
                      >{{item.name}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="补课状态">
                    <a-select
                      v-model="queryParam.tutoring_type"
                      style="width:80%;"
                      placeholder="请选择补课状态"
                      allowClear
                    >
                      <a-select-option :value="1">待补课</a-select-option>
                      <a-select-option :value="3">插班已补</a-select-option>
                      <a-select-option :value="4">标记已补</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-form-model>
            </a-form>
          </a-row>
        </div>
        <a style="cursor:pointer" v-if="showSearch" @click="showSearch=!showSearch" id="moreButton">
          收起
          <a-icon type="up"></a-icon>
        </a>
        <a
          style="cursor:pointer"
          v-if="!showSearch"
          @click="showSearch=!showSearch"
          id="moreButton"
        >
          展开
          <a-icon type="down"></a-icon>
        </a>
        <div class="tableTopActionBtns">
          <a-button @click="missClassExport">导出</a-button>
        </div>
        <s-table
          ref="table1"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData"
          class="user_management_table"
          style="margin-top:20px;"
          :scroll="{x:2000}"
          :pagination="pagination"
        >
          <span slot="name" slot-scope="text,record">
            <span v-if="record.student">{{record.student.name}}</span>
          </span>
          <span slot="phone" slot-scope="text,record">
            <span v-if="record.student">{{record.student.main_phone}}</span>
          </span>
          <span slot="className" slot-scope="text,record">
            <span>{{record.class_name||'-'}}</span>
          </span>
          <span slot="classTime" slot-scope="text,record">
            <span
              v-if="record.record"
            >{{record.record.attend_class_day}}&nbsp;{{record.record.start_time}}-{{record.record.end_time}}</span>
          </span>
          <span slot="shouldClassTime" slot-scope="text,record">
            <span v-if="record.consume_type==1">{{record.class_hour}}</span>
            <span v-else-if="record.consume_type==2">按天自动扣课时</span>
          </span>
          <span slot="comeType" slot-scope="text,record">
            <span
              v-if="record.type"
            >{{record.type==2?'迟到':record.type==3?'请假':record.type==4?'未到':''}}</span>
          </span>
          <span slot="costCourse" slot-scope="text,record">
            <span v-if="record.course">{{record.course.name}}</span>
            <span v-else>-</span>
          </span>
          <span slot="action_" slot-scope="text,record">
            <!-- <a :disabled="record.type==1">插班补课</a>
            <a-divider type="vertical" />-->
            <a :disabled="record.tutoring_type!==1" @click="changeRecordType(record)">标记已补</a>
          </span>
          <span slot="realHour" slot-scope="text,record">
            <span v-if="record.consume_type==1">
              <span v-if="record.tutoring_type!==3&&record.tutoring_type!==4">
                <span v-if="!record.inputType">
                  {{record.deduction}}
                  <a title="修改">
                    <a-icon
                      type="edit"
                      style="margin-left:10px;cursor:pointer"
                      @click="record.inputType=!record.inputType"
                    />
                  </a>
                </span>
                <span v-else>
                  <a-input-number v-model="record.deduction" :step="0.1" :min="0"></a-input-number>
                  <a title="保存">
                    <a-icon type="save" style="margin-left:10px;" @click="saveRealHour(record)"></a-icon>
                  </a>
                </span>
              </span>
              <span v-else>{{Number(record.deduction)+Number(record.go_beyond)}}</span>
            </span>
            <span v-else-if="record.consume_type==2">按天自动扣课时</span>
          </span>
          <span slot="info" slot-scope="text,record">
            <a
              v-if="record.tutoring_type==3||record.tutoring_type==4"
              @click="showRecordInfo(record.id)"
            >查看详情</a>
            <span v-else>-</span>
          </span>
          <!-- realHour -->
          <span slot="type" slot-scope="text,record">
            <span v-if="record.tutoring_type==1">
              <span style="color:red;">●</span>
              待补课
            </span>
            <span v-else-if="record.tutoring_type==2">
              <span style="color:#1890ff;">●</span>
              补课中
            </span>
            <span v-else-if="record.tutoring_type==3">
              <span style="color:#52c41a;">●</span>
              插班已补
            </span>
            <span v-else-if="record.tutoring_type==4">
              <span style="color:#52c41a;">●</span>
              标记已补
            </span>
          </span>
          <span slot="student_num" slot-scope="text,record">
            <span>{{record.student_num}}/{{record.upper_limit}}</span>
          </span>
        </s-table>
      </a-card>
    </a-spin>
    <a-modal
      title="补课确认"
      @cancel="makeUpLessonVisible=false"
      @ok="makeUpLesson"
      :visible="makeUpLessonVisible"
      style="padding:20px;"
      @confirmLoading="modalLoading"
    >
      <div style="margin-bottom: 5px;">
        确定
        <span
          style="font-size:16px;color:#1890ff"
          v-if="makeUpLessonStudentInfo.student"
        >{{makeUpLessonStudentInfo.student.name}}</span>
        同学已完成补课
      </div>
      <div>
        <a-textarea placeholder="请填写补课备注（选填，最多200字）" :max-length="200" v-model="remark" :rows="4" />
      </div>
    </a-modal>
    <a-modal title="补课详情" :visible="showInfo" :footer="null" @cancel="showInfo=false">
      <a-timeline>
        <a-timeline-item v-if="infomation&&infomation.teachers">
          插班补课
          <div style="color:#bbb;" v-if="infomation&&infomation.tutoring_at">{{infomation.tutoring_at|formatDate}}</div>
          <div>
            上课班级：
            <span v-if="infomation&&infomation.class_name">{{infomation.class_name}}</span>
            <span v-else>-</span>
          </div>
          <div>
            上课时间：
            <span v-if="infomation&&infomation.attend_class_day">
              <span>
                {{infomation.attend_class_day}}
                <span
                  style="margin-left:10px"
                >{{infomation.start_time}}</span>
                <span>~{{infomation.end_time}}</span>
              </span>
            </span>
            <span v-else>-</span>
          </div>
          <div>
            上课老师：
            <span v-if="infomation&&infomation.teachers">
              <span v-if="infomation.teachers.length>0">{{infomation.teachers.join(',')}}</span>
              <span v-else>-</span>
            </span>
            <span v-else>-</span>
          </div>
        </a-timeline-item>
        <a-timeline-item>
          <span v-if="infomation&&infomation.teachers">
            完成补课
          </span>
          <span v-else>
          标记已补
          </span>
          <div style="color:#bbb;" v-if="infomation&&infomation.tutoring_at">{{infomation.tutoring_at|formatDate}}</div>
          <div v-if="infomation&&infomation.teachers">
            到课状态：
            <span
              v-if="infomation&&infomation.type"
            >{{infomation.type==1?'到课':infomation.type==2?'迟到':infomation.type==3?'请假':infomation.type==4?'未到':''}}</span>
            <span v-else>-</span>
          </div>
          <div>
            备注：
            <span v-if="infomation&&infomation.remarks">{{infomation.remarks}}</span>
            <span v-else>-</span>
          </div>
        </a-timeline-item>
      </a-timeline>
    </a-modal>
  </div>
</template>

<script>
import {
  missLessonList,
  changeType,
  changeDeductionTime,
  exportMissClass,
  editMissClassesHour,
  lookMissClassesInfo,
} from '@/api/missLesson'
import { coursesList } from '@/api/courseCharge'
import { teacherList } from '@/api/teacher'
import { classList } from '@/api/class'
import { STable } from '@/components'
export default {
  components: { STable },
  data() {
    return {
      showSearch: false,
      showInfo: false,
      infomation: null,
      queryParam: {
        school_id: this.$store.state.user.school,
        // teacher_id,
        // course_id,
        // class_id
      },
      keywords: undefined,
      coursesList: [],
      teacherList: [],
      classList: [],
      loading: false,
      pagination:{
        showTotal:total=>`共${total}条数据`,
      }, 
      columns: [
        {
          title: '学员姓名',
          dataIndex: 'name',
          ellipsis: true,
          scopedSlots: { customRender: 'name' },
          // finish_time
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          width: 150,
          ellipsis: true,
          scopedSlots: { customRender: 'phone' },
        },
        {
          title: '班级名称',
          dataIndex: 'className',
          ellipsis: true,
          width: 200,
          scopedSlots: { customRender: 'className' },
        },
        {
          title: '上课时间',
          dataIndex: 'classTime',
          width: 200,
          scopedSlots: { customRender: 'classTime' },
        },
        {
          title: '上课老师',
          dataIndex: 'teacher',
          ellipsis: true,
          width: 200,
          customRender(text, record) {
            return record.teachers.length > 0 ? record.teachers.join(',') : '-'
          },
        },
        {
          title: '缺课状态',
          dataIndex: 'comeType',
          ellipsis: true,
          scopedSlots: { customRender: 'comeType' },
        },
        {
          title: '消耗课程',
          dataIndex: 'costCourse',
          ellipsis: true,
          scopedSlots: { customRender: 'costCourse' },
        },
        {
          title: '应扣课时',
          dataIndex: 'shouldClassTime',
          ellipsis: true,
          scopedSlots: { customRender: 'shouldClassTime' },
        },
        {
          title: '实扣课时',
          dataIndex: 'real_hour',
          ellipsis: true,
          width: 150,
          scopedSlots: { customRender: 'realHour' },
        },
        {
          title: '补课状态',
          dataIndex: 'type',
          ellipsis: true,
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '补课详情',
          dataIndex: 'info',
          ellipsis: true,
          scopedSlots: { customRender: 'info' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
          align: 'left',
          scopedSlots: { customRender: 'action_' },
        },
      ],
      loadData: (parameter) => {
        return missLessonList(Object.assign(parameter, this.queryParam, { keywords: this.keywords }))
          .then((res) => {
            let param = JSON.parse(JSON.stringify(res))
            console.log(param)
            param.data.forEach((val) => {
              val.inputType = false
            })
            return param
          })
          .catch((err) => {
            this.$message.error(err.data.message || '获取数据失败，请刷新页面或稍后再试')
          })
      },
      makeUpLessonVisible: false,
      makeUpLessonStudentInfo: {},
      remark: undefined,
      modalLoading: false,
    }
  },
  watch: {
    queryParam: {
      handler(val) {
        this.$refs.table1.refresh(true)
      },
      deep: true,
    },
    showInfo(val) {
      if (val) {
      } else {
        this.infomation = null
      }
    },
  },
  created() {
    this.getSelect()
  },
  methods: {
    changeDate(date, dateString) {
      this.queryParam.start_time = dateString[0]
      this.queryParam.end_time = dateString[1]
      this.$refs.table1.refresh()
    },
    getSelect() {
      coursesList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.coursesList = res.data
      })
      classList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.classList = res.data
      })
      teacherList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.teacherList = res.data
      })
    },
    changeRecordType(e) {
      this.makeUpLessonStudentInfo = e
      this.makeUpLessonVisible = true
    },
    makeUpLesson() {
      this.modalLoading = true
      changeType({ remedial_remarks: this.remark||'' }, this.makeUpLessonStudentInfo.id)
        .then((res) => {
          this.$message.success('修改补课状态成功')
          this.modalLoading = false
          this.remark = undefined
          this.makeUpLessonStudentInfo = {}
          this.$refs.table1.refresh()
          this.makeUpLessonVisible = false
        })
        .catch((err) => {
          this.modalLoading = false
          this.$message.error(err.data.message || '修改补课状态失败')
        })
    },
    saveRealHour(e) {
      editMissClassesHour({ class_hour: e.deduction, type: e.type, remarks: e.remarks }, e.id)
        .then((res) => {
          this.$refs.table1.refresh()
        })
        .catch((err) => {
          this.$message.error(err.data.message || '修改实扣课时失败')
        })
    },
    //导出
    missClassExport() {
      this.loading = true
      exportMissClass(this.$store.state.user.school)
        .then((res) => {
          let url = res.url.url + res.url.path
          window.location.href = url
        })
        .catch((err) => {
          this.$message.error(err.data.message || '导出失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    showRecordInfo(id) {
      lookMissClassesInfo(id).then((res) => {
        this.infomation = res
        this.showInfo = true
      }).catch(err=>{
        this.$message.error(err.data.message||'获取补课详情失败')
      })
    },
  },
}
</script>

<style lang="less" scoped>
#aCardPosition {
  position: relative;
}
#moreButton {
  position: absolute;
  top: 34px;
  right: 20px;
}
.searchBtn {
  margin: 16px 20px 16px 0;
}
</style>